<template>
  <div>
    <div class="header">
      <!--<img v-bind:src="[header+info.data.logo]">-->
      <router-link to="/aboutUs">关于我们</router-link>
      <router-link to="/introduction">公司简介</router-link>
      <router-link to="/index">首页</router-link>
    </div>
    <div class="main">
      <span>
				首 页>新 闻 中 心
			</span>
      <div class="newLogo">
        <img src="../assets/新闻资讯-新闻中心页@2x.png" alt="">
      </div>
      <div class="center2">
        <div class="select">
          <div class="input">
            <img src="../assets/搜索@2x.png" v-on:click="search" >
            <input id="search" placeholder="请 搜 索 ...">
          </div>
        </div>
      </div>
    </div>
    <div>
        <div>
              <yd-flexbox v-for="n in info.data.data.news" class="newItem">
                <div>
                  <img class="newImg" :src="header+n.newsImgPath">
                </div>
                <yd-flexbox-item class="newItem">
                  <h5>{{n.newsTitles}}</h5>
                  <span>{{dateFormat(n.newsAddTime)}}</span>
                  <hr style="width: 100%">
                  <p>{{n.newsAbs}}</p>
                  <router-link :to="{name:'NewDetail',params: {id:n.id}}" class="btn">查看详情</router-link>
                </yd-flexbox-item>
              </yd-flexbox>
              <div id="load" v-infinite-scroll ="loadMore"
                   infinite-scroll-disabled ="busy" infinite-scroll-distance="10">
                <img  v-show="busy" src="../assets/loading_circle_40b82ef.gif" alt="">
              </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
      name: "NewsIndex",
      data() {
        return {
          header:"https://sy.mujiwulian.net/sy/",
          keyword:'',
          busy: false,
          page:1,
          pageSize:4,
          total:0,
          info:{
            code: null,
            msg: null,
            data: {
              isSuccess: false,
              message: "",
              data: {
                total: 0,
                news: [{
                  id: 45,
                  newsTitles: "",
                  newsImgPath: "",
                  newsAbs: "",
                  newsAddTime: ""
                }]
              },
              "success": true
            }
          }
        }
      },
      mounted(){
        this.$axios
          .get("https://sy.mujiwulian.net/sy/website/news/?sy="+
            this.$store.getters.getUser.sy+"&keyword="+this.keyword)
          .then(
            response=>(this.info=response.data),
            this.total+=4
          );
      },
      methods:{
        search:function(){
          this.keyword=document.getElementById('search').value;
          this.$axios
            .get("https://sy.mujiwulian.net/sy/website/news/?sy="+
              this.$store.getters.getUser.sy+"&keyword="+this.keyword)
            .then(
              response=>(this.info=response.data),
              this.total=4,
              this.page=1
            );
        },
        dateFormat:function(time) {
          let date=new Date(time);
          let year=date.getFullYear();
          /* 在日期格式中，月份是从0开始的，因此要加0
           * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
           * */
          let month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
          let day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
          let hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
          let minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
          let seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
          // 拼接
          return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        },
        loadMore: function(){
          if(this.total<this.info.data.data.total)
          {
            this.busy = true;
            setTimeout(()=>{
              //调用接口添加数据
              this.$axios
                .get("https://sy.mujiwulian.net/sy/website/news/?sy="+
                  this.$store.getters.getUser.sy+"&page="+(this.page+1)+"&keyword="+this.keyword)
                .then(
                  response=>(
                    this.info.data.data.news=
                      this.info.data.data.news.concat(response.data.data.data.news),
                      this.page++,
                      this.total+=4,
                      this.busy = false
                  ));
            }, 1000);
          }
        }
      }
    }
</script>

<style scoped>
  *{
    margin: 0px;
    padding: 0px;
  }
  .header{
    height: 40px;
    background-color: rgb(133,160,173);
    margin-bottom: 12px;
  }
  .header a{
    color: rgb(97,62,147);
    height: 100%;
    font-size: 15px;
    font-weight: 100;
    float: right;
    display:block;
    width: 65px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 40px; /* 设置垂直居中 */
  }

  .main>span{
    color: rgb(131,131,131);
    font-size: 15px;
    margin: 20px;
  }
  .main>.newLogo{
    display: block;
    text-align: center;
  }
  .main>.newLogo>img{
    margin: 20px;
    height: 36px;
    width: auto;
  }
  .main>.center2{
    width: 100%;
  }
  .main>.center2>.select{
    background:url(../assets/组1@2x.png) no-repeat;
    width: 100%;
    height: 100px;
  }
  .main>.center2>.select>.input{
    width: 80%;
    position: absolute;
    padding-top: 35px;
    padding-left: 20%;
  }
  .main>.center2>.select img{
    height: 30px;
    width: 30px;
  }
  .main>.center2>.select input{
    /*margin: 0px;*/
    /*padding: 0px;*/
    position: absolute;

    width: 60%;
    height: 30px;
    border: 1px;
    border-radius: 0 36px 36px 0;
    /*outline:none;*/
    line-height: 72px;
    font-size: 15px;
    color: rgb(166,175,240);
    background-color: white;
    text-align: center;
  }
  .newItem{
    background-color: #FFF;
    margin: 20px;
    border-radius: 10px;

  }
  .newItem>h5{
    text-align: center;
    margin-bottom: 10px;
  }
  .newItem>span{
    float: right;
    margin-bottom: 10px;
  }
  .newItem>p{
    clear:both;
  }
  .newItem>.btn{
    text-align: center;
    width: 80px;
    border: 1px solid;
    border-radius: 10px;
    float: right;
    margin-top: 20px;
  }
  .newImg{
    height: 120px;
    width: 120px;
  }
  #load{
    display: block;
    text-align: center;
  }
  #load>img{
    height: 25px;
    width: 25px;
  }
</style>
